<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-04-20 20:36:34
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-20 23:06:41
 * @FilePath: \starter-3\pages\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

  <div class="homePage-content">
    <div class="first-box">
      <adBox />
      <bulletinBox />
      <myCalendar />
    </div>

    <!-- 内容区域 -->
    <div class="has-menu-box">
      <div class="left-type">
        <el-skeleton :loading="businessCategoriesLoading" animated :count="20">
          <template #template>
            <div class="left-type-info">
              <el-skeleton-item variant="text" class="type-text"></el-skeleton-item>
            </div>

          </template>
          <template #default>
            <div class="left-type-info" v-for="(item, index) in businessCategories" :key="index" :class="{
              'active': item.id === businessCategoriesActive,
              'hover': item.id === hoverBusinessId && item.id !== businessCategoriesActive
            }" @click="businessCategoriesActiveChange(item.id, index)">
              <div class="type-text">{{ item.name }}</div>
            </div>
          </template>
        </el-skeleton>
      </div>
      <div class="right-content">
        <countryTime />
        <div class="third-box">
          <div class="public-title">交流社群</div>
          <communicationCommunity />
          <myNavigation ref="myNavigationRef" />
        </div>
        <div class="four-box">
          <realRate />
          <div class="to-sea-box">
            <div class="right-box" id="inner">
              <el-skeleton :loading="businessCategoriesLoading" animated :count="20">
                <template #template>
                  <div class="tab-box">
                    <div class="tab-title"></div>
                    <el-skeleton-item class="check-ul" variant="h1" />

                    <div class="tool-content">
                      <div class="tool-box" v-for="i in 6" :key="i">
                        <div class="tool-info">
                          <div class="tool-icon">
                            <el-skeleton-item style="width: 40px;height: 40px;" variant="circle" />
                          </div>
                          <div class="tool-text-box">
                            <el-skeleton-item class="title" variant="h1" />
                            <el-skeleton-item class="text" variant="h1" />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <template #default>
                  <div class="tab-box" v-for="(item, businessIndex) in businessCategories" :key="businessIndex"
                    :id="'businessCategories' + item.id" @mouseenter="hoverBusinessId = item.id"
                    @mouseleave="hoverBusinessId = null">
                    <div class="tab-title">{{ item.name }}</div>
                    <ul class="check-ul">
                      <li @click.stop="toolCategoriesActiveChange(itemCategories.id, businessIndex, indexCategories)"
                        v-for="(itemCategories, indexCategories) in item.toolCategories"
                        :class="{ 'active': toolCategoriesActive === itemCategories.id }"
                        :key="indexCategories">
                        <span>{{ itemCategories.name }}</span>
                      </li>
                    </ul>
                    <div class="tool-content">
                      <div class="tool-box" @click.stop="addRecentlyUseFun(itemTool)"
                        v-for="(itemTool, indexTool) in item?.tools" :key="indexTool">
                        <div class="tool-info">
                          <div class="tool-icon">
                            <img v-if="itemTool.logoUrl" :src="itemTool.logoUrl" alt="">
                          </div>
                          <div class="tool-text-box">
                            <div class="title">
                              {{ itemTool.name }}
                            </div>
                            <div class="text">
                              <el-tooltip class="box-item" popper-class="box-item" style="width: 200px" effect="dark"
                                placement="bottom">
                                <template #content>
                                  <div>{{ itemTool.name }}</div>
                                  <div>{{ itemTool.description }}</div>
                                </template>
                                <div class="popover-box">
                                  {{ itemTool.description }}
                                </div>
                              </el-tooltip>
                            </div>
                          </div>
                        </div>
                        <!--                  <div class="tool-btn-box">-->
                        <!--                    <div class="btn-item">-->
                        <!--                      <a :href="item.linkUrl">官网</a>-->
                        <!--                    </div>-->
                        <!--                    <div class="btn-item">本土</div>-->
                        <!--                    <div class="btn-item">跨境</div>-->
                        <!--                  </div>-->
                      </div>
                    </div>
                  </div>
                </template>
              </el-skeleton>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Banner 区域 -->
</template>
<style>
.box-item {
  width: 180px;
  position: relative;
  margin-left: -20px;
  margin-top: 10px;
}
</style>
<script setup>
import realRate from '@/components/homepage/realRate.vue';
import myNavigation from '~/components/homepage/myNavigation.vue';
import communicationCommunity from '~/components/homepage/communicationCommunity.vue';
import countryTime from '~/components/homepage/countryTime.vue';
import bulletinBox from '~/components/homepage/bulletinBox.vue';
import adBox from '~/components/homepage/adBox.vue';

// eslint-disable-next-line
import { ref, onMounted } from "vue"
import {
  addRecentlyUse,
  getHomeOutSeaBusinessCategories, getHomeOutSeaTools,
} from "@/api/homePage";

import { useSeoMeta } from '#app'
useSeoMeta({
  title: '中国企业全球化导航站-中国企业出海工具集成|贸行四海',
  description: '贸行四海是一家服务中国企业出海的综合平台，以让中国企业全球化发展更高效更安全为使命，始终围绕出海企业需求，为出海企业提供丰富的出海常用工具与AI工具、重点国别市场和行业的出海解决方案，出海活动与社群，知名出海品牌动态，旨在成为中国企业全价值链出海的导航员。寻找出海新商机，就上「贸行四海]。',
  keywords: '品牌出海，跨境电商，产能出海，供应链出海，AI出海，服务贸易，文化出海，出海社群',
  // ogTitle: '社交媒体分享标题',
  // ogDescription: '社交媒体分享描述',
  // ogImage: '社交媒体分享图片URL',
  // twitterCard: 'summary_large_image'
})

const myNavigationRef = ref(null)

// 增加最近使用
const addRecentlyUseFun = (data) => {
  if (useUserStore().token) {
    addRecentlyUse(data.id).then(res => {
      myNavigationRef.value.getRecentlyUsedListFun();
      window.open(data.linkUrl, "_blank");
    })
  } else {
    window.open(data.linkUrl, "_blank");
  }
}

onMounted(() => {
  // init();
})

const businessCategories = ref([]); // 业务分类列表
const businessCategoriesActive = ref(null)
const toolCategoriesActive = ref([]);// 工具分类列表
const businessCategoriesLoading = ref(true);

// 出海专区
const getHomeOutSeaFun = () => {
  return getHomeOutSeaBusinessCategories().then(res => {
    businessCategories.value = res.data;
    businessCategoriesLoading.value = false;
    toolCategoriesActive.value = businessCategories.value[0]?.toolCategories?.[0]?.id;
  })
}

const getHomeOutSeaFunSSR = async () => {
  const getHomeOutSeaBusinessCategoriesData = await getApi('/home/out-sea/business-categories');
  businessCategories.value = getHomeOutSeaBusinessCategoriesData.data;
  businessCategoriesLoading.value = false;
  toolCategoriesActive.value = businessCategories.value[0]?.toolCategories?.[0]?.id;
}

getHomeOutSeaFunSSR();

// 出海专区业务分类切换
const businessCategoriesActiveChange = (id, index) => {
  businessCategoriesActive.value = id;
  // 切换到新的业务分类时，自动高亮其第一个子分类
  if (businessCategories.value[index].toolCategories.length > 0) {
    toolCategoriesActive.value = businessCategories.value[index].toolCategories[0].id;
  }

  // 使用锚点跳转
  const target = document.getElementById('businessCategories' + id);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth' });
  }
}

// 出海专区工具分类切换
const toolCategoriesActiveChange = (toolId, businessIndex) => {
  // 更新当前业务分类下的激活子分类
  toolCategoriesActive.value = toolId;
  // a 业务分类 b 工具类型
  getHomeOutSeaTools({ a: businessCategories.value[businessIndex].id, b: toolId }).then(res => {
    businessCategories.value[businessIndex].tools = res.data.tools
  })
}

const init = async () => {
  getHomeOutSeaFun();
}

const hoverBusinessId = ref(null);
</script>